import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入store
import store from '@/store'

// 引入路由中需要的组件功能
// import Login from '@/views/login/index'
// import Layout from '@/views/layout/index'
// import Home from '@/views/home/index'
// import Role from '@/views/role/index'
// import Menu from '@/views/menu/index'
// import Resource from '@/views/resource/index'
// import Course from '@/views/course/index'
// import User from '@/views/user/index'
// import Advert from '@/views/advert/index'
// import AdvertSpace from '@/views/advert-space/index'
// import ErrorPage from '@/views/error-page/index'
// 之前在html中引入时，只需要引入文件，
// 在js文件中引入时需要用以下方法
Vue.use(VueRouter)

// 路由规则(添加需要认证的requireAuth 信息)
const routes = [{
  path: '/login',
  name: 'login',
  component: () => import(/* webpackChunkName: 'home' */'@/views/login/index')
},
{
  path: '/',
  component: () => import(/* webpackChunkName: 'home' */'@/views/layout/index'),
  // 直接给某个路由设置，这时内部的子路由都需要认证（包含当前路由）
  meta: { requiresAuth: true },
  children: [
    {
      path: '',
      name: 'home',
      // component: Home
      component: () => import(/* webpackChunkName: 'home' */'@/views/home/index')
    },
    {
      path: '/role',
      name: 'role',
      // component: Role
      component: () => import(/* webpackChunkName: 'role' */'@/views/role/index')
    },
    // 分配菜单路由组件
    {
      path: '/role/:roleId/alloc-menu',
      name: 'alloc-menu',
      // component: Role
      component: () => import(/* webpackChunkName: 'alloc-menu' */'@/views/role/alloc-menu'),
      props: true
    },
    // 分配资源路由组件
    {
      path: '/role/:roleId/alloc-resource',
      name: 'alloc-resource',
      component: () => import(/* webpackChunkName: 'alloc-resource' */'@/views/role/alloc-resource'),
      props: true
    },
    {
      path: '/menu',
      name: 'menu',
      // component: Menu
      component: () => import(/* webpackChunkName: 'menu' */'@/views/menu/index')
    },
    {
      path: '/menu/create',
      name: 'menu-create',
      component: () => import(/* webpackChunkName: 'menu-create' */'@/views/menu/create')
    },
    {
      path: '/menu/:id/edit',
      name: 'menu-edit',
      component: () => import(/* webpackChunkName: 'menu-edit' */'@/views/menu/edit')
    },
    {
      path: '/resource',
      name: 'resource',
      // component: Resource
      component: () => import(/* webpackChunkName: 'resource' */'@/views/resource/index')
    },
    {
      path: '/resource/resource-category',
      name: 'resource-category',
      // component: Resource
      component: () => import(/* webpackChunkName: 'resource-category' */'@/views/resource/resource-category')
    },
    {
      path: '/course',
      name: 'course',
      // component: Course
      component: () => import(/* webpackChunkName: 'course' */'@/views/course/index')
    },
    // 添加课程组件
    {
      path: '/course/course-create',
      name: 'course-create',
      component: () => import(/* webpackChunkName: 'course-create' */'@/views/course/course-create')
    },
    // 编辑课程组件
    {
      path: '/course/:courseId/course-edit',
      name: 'course-edit',
      component: () => import(/* webpackChunkName: 'course-edit' */'@/views/course/course-edit'),
      props: true
    },
    // 课时视频上传
    {
      path: '/course/:courseId/video',
      name: 'course-video',
      component: () => import(/* webpackChunkName: 'course-video' */'@/views/course/video'),
      props: true
    },
    // 课程内容管理组件
    {
      path: '/course/:courseId/course-section',
      name: 'course-section',
      component: () => import(/* webpackChunkName: 'course-section' */'@/views/course/course-section'),
      props: true
    },
    {
      path: '/user',
      name: 'user',
      // component: User
      component: () => import(/* webpackChunkName: 'user' */'@/views/user/index')
    },
    {
      path: '/advert',
      name: 'advert',
      // component: Advert
      component: () => import(/* webpackChunkName: 'advert' */'@/views/advert/index')
    },
    {
      path: '/advert-space',
      name: 'advert-space',
      // component: AdvertSpace
      component: () => import(/* webpackChunkName: 'advert-space' */'@/views/advert-space/index')
    }
  ]
},
{
  path: '*',
  name: 'error-page',
  component: () => import(/* webpackChunkName: 'home' */'@/views/error-page/index')
}
]

// 创建VueRouter实例
const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  // console.log(to)
  //  验证当前页面是否需要认证
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // console.log('当前页面需要认证')
    // console.log(store.state.user)
    // 验证vuex的store 中的登录用户信息是否存储
    if (!store.state.user) {
    // 未登录 跳转到登录页并且存储当前的fullPath
      return next({
        name: 'login',
        // query:查询字符串参数
        query: {
          // 将本次路由的fullPath传给login
          redirect: to.fullPath
        }
      })
    }
    // 已经登录 校验通过
    next()
  } else {
    // console.log('当前页面不需要认证')
    next()
  }
})
// 模块导出
export default router
